<template>
  <!-- <base-index is-edit="handler" /> -->
    <div class="handler-document" v-loading="loading" element-loading-background="rgba(255, 255, 255,1)">
      <div class="title">
        收文处理笺
      </div>
      <table
        class="table-wrapper"
        border="1px"
        cellspacing="0"
        cellpadding="0"
      >
        <tr height="40">
          <td width="12%" align="center">来文单位</td>
          <td width="35%">
            <span>技术部</span></td>
          <td width="12%" align="center">来文日期</td>
          <td width="35%">
            <span>2019-08-12</span>
          </td>
        </tr>
        <tr height="40">
          <td align="center">文件标题</td>
          <td colspan="4">
              <span>{{ pager.title}}</span>
          </td>
        </tr>
        <tr height="40">
          <td width="12%" align="center">缓急程度</td>
          <td width="35%">
              <span>{{ pager.emergency_level }}</span>
          </td>
          <td width="12%" align="center">份数</td>
          <td width="35%">
              <span>1</span>
          </td>
        </tr>
        <tr height="40">
          <td width="10%" align="center">发文目标</td>
          <td width="35%">
            <span>{{ pager.way}}</span>
          </td>
          <td width="12%" align="center">公文分类</td>
          <td width="35%">
            <span>{{ pager.paper_type}}</span>
          </td>
        </tr>
        
        <tr class="situation">
            <td  width="30" align="center">拟办意见</td>
            <td colspan="4" class="content">
                <div class="inform">
                    <div class="inform-comment">{{ info.comment }}</div>
                    <div class="info">
                      <div class="info-name">{{ info.name }}</div>
                      <div>{{ info.date }}</div>
                    </div>
                  </div>
              </td>
          </tr>
         
          <tr class="situation">
            <td  width="30" align="center">领导批示</td>
            <td colspan="4" class="content">
                <div class="inform" v-for="(item,index) in situation">
                    <div>{{ item.fullMessage }}</div>
                    <div class="info">
                      <div class="info-name">{{ item.userId }}</div>
                      <div>{{ item.date }}</div>
                    </div>
                  </div>
              </td>
          </tr>
          <tr class="situation">
            <td  width="30" align="center">分管<br>领导意见</td>
            <td colspan="4"  class="content">
              
              </td>
          </tr>
      </table>
      <el-divider></el-divider>
      <el-row type="flex" class="input-warpper">
        <div class="name">审批意见:</div>
        <el-input type="text" v-model="comment" clearable size="small"></el-input>
      </el-row>
      <el-row type="flex" justify="center"> 
          <el-button type="primary" size="small" @click="handSaveProcess">保存流转</el-button>
          <el-button type="danger" size="small" @click="handReject">驳回</el-button>
          <!-- <el-button type="primary" size="small" @click="">打印</el-button> -->
          <el-button type="primary" size="small" @click="showDialogProcess">流程监控</el-button>
        </el-row>
        <!-- 流程监控 -->
        <el-dialog title="流程监控"  :visible.sync="dialogProcessVisible" width="70%">
          <el-timeline class="process-info ">
              <el-timeline-item
                v-for="(item, index) in activities"
                :key="index">
                <el-card>
                <div slot="header" class="clearfix">
    <span>{{ item.activityName }}</span>
    <span class="user"><i class="icon el-icon-user" v-if="item.assignee"></i>{{ item.assignee }}</span>
  </div>
    <div class="content">
    
                  开始时间:<span class="time">{{ item._startTime }}</span>
                  结束时间:<span class="time">{{ item._endTime }}</span>
    </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import { getPaperClassify, createDocument, getPagerById } from "@/api/document.js";
  import { getProcess, startProcess, completeTasks, getCommenthi, getProcessMinitor } from "@/api/workflow.js";
  import { parseTime } from "@/utils/index";
  // import BaseIndex from "../index";

  export default {
    name: "HandlerDocument",
    filters: {
      formatPriceMoney: function(val) {
        if (!val) return "";
        let value = val.toFixed(2);
        return value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      },
      formatPriceUpper: function(val) {
        if (!val) return "";
        let value = val.toFixed(2);
        return changeNumMoneyToChinese(value);
      },
      formatDate: function(val) {
        if (!val) return "";
        let date = val.split("T")[0];
        return date.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日");
      }
    },
    data() {
      return {
        pager: {},
        info:{
           comment:'收文单位文秘部门对所收到的文件提出的\t送负责人批示或者交有关部门办理的意见收文单位文秘部门对所收到的文件提出的\t送负责人批示或者交有关部门办理的意见', name:'张三', date:'2019-10-22 11:59'
        },
        situation:[
          { comment:'已通过审批', name:'张三', date:'2019-10-22 11:59'},
          { comment:'已阅', name:'张三', date:'2019-10-22 11:59'},
          { comment:'已阅', name:'张三', date:'2019-10-22 11:59'},
          { comment:'已阅', name:'李四', date:'2019-10-22 11:59'},
        ],
        activities: [{
          content: '活动按期开始',
          timestamp: '2018-04-15'
        }, {
          content: '通过审核',
          timestamp: '2018-04-13'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }],
        loading: false,
        dialogProcessVisible: false,
        proId: null,
        targetID: null,
        comment: '' // 处理意见
      };
    },
    computed: {
          inpNum () {
              return this.document.printAmount
          },
          ...mapGetters([
            'name'
          ]),
      },
    created() {
      // this.proId = this.$route.query.proId
      // this.targetID = this.$route.query.targetId
      // this.pagerId = this.$route.params.id
      // this.requestPager();
      // this.requestCommenthi()
    },
    watch:{
        
    },
    methods: {
      // 保存流程
    handSaveProcess(){
      const param = {
        dealReason: this.comment,
        dealType: '0',
        dealUserId: this.name,
        dealUnitId:"0"
      }
      completeTasks(this.targetID, param).then(res =>{
        if(res && res.data === true){
          this.$notify({
              title: '成功',
              message: '保存流转成功',
              type: 'success'
          });
        }else{
          this.$notify({
              title: '失败',
              message: '保存流转失败',
              type: 'error'
          });
        }
      })
    },
    // 驳回
    handReject(){
      const param = {
        dealReason: this.comment,
        dealType:"1",
        rejectNodeId:"S00000"
      }
      completeTasks(this.targetID, param).then(res =>{
        if(res && res.data === true){
          this.$notify({
              title: '成功',
              message: '驳回审批成功',
              type: 'success'
          });
        }else{
          this.$notify({
              title: '失败',
              message: '驳回审批失败',
              type: 'error'
          });
        }
      })
    },
    // 显示流程监控页面
    showDialogProcess(){
      this.dialogProcessVisible = true
      this.requestProcessMinitor()
    },
    // 获取流程监控数据
    requestProcessMinitor(){
      getProcessMinitor(this.proId).then(
        res =>{
          const data = res.data
          data.forEach(
            e =>{
              e._startTime = parseTime(e.startTime, '{y}-{m}-{d}')
              e._endTime = parseTime(e.endTime, '{y}-{m}-{d}')
            }
          )
          this.activities = data
        }
      )
    },
      requestPager(){
        getPagerById(this.pagerId).then(
          res =>{
            this.pager = res.data
          }
        )
      },
      // 获取审批记录
      requestCommenthi(){
        getCommenthi(this.proId).then(
          res =>{
            const data = res.data
            data.forEach(
              e =>{
                e.date = parseTime(e.time, '{y}-{m}-{d} {h}:{i}')
              }
            )
            this.situation = data
          }
        )
      }
    }
  };
  </script>
  <style media="printContent">
  @page {
    size: auto; /* auto is the initial value */
    margin: 0mm 15mm 0;
  }
  </style>
  <style lang="scss">
  .handler-document1 {
    margin: 0 20px 20px;
    overflow-x: hidden;
    .title{
      text-align: center;
    font-size: 25px;
    color: red;
    padding: 15px 0px;
    /* margin-top: 20px; */
    }
    table{
      border-collapse:collapse;
      border:none;
    }
    table td{
      border: 1px solid red;
    }
    .table-wrapper {
      width: 100%;
      max-width: 800px;
      font-size: 14px;
      font-weight: bold;
      border-color: #f443367a;
      color: red;
      margin: 0 auto;
      .situation{
        min-height: 80px;
        height: 80px;
        .content{
          padding: 10px 0;
        .inform{
          height: 70px;
          padding: 10px;
          margin: 0 10px;
          border-bottom: 1px dotted;
          color: #000;
          font-weight: normal;
          &-comment{
            width: 60%;
          }
          .info{
            float: right;
            font-size: 12px;
            text-align: center;
            color: #797979;
            &-name{
              padding: 6px;
            }
          }
          &:last-child{
            border: none;
          }
        }
      }
      }
      td{
        span{
          margin-left: 10px;
          color: #000;
          font-weight: normal;
        }
      }
      .radio-group {
        margin-left: 15px;
      }
      .el-input__inner {
        background-color: transparent;
        border: 0;
      }
    }
    .input-warpper{
      max-width: 800px;
      width: 100%;
      margin: 10px auto;
      .name{
        width: 80px;
        color: #797979;
        line-height: 30px;
      }
    }
    .process-info{
      padding-left: 5px;
      .user{
        float: right; 
        padding: 3px 0;
        .icon{
          padding-right: 3px;
        }
      }
      .content{
        font-size: 12px;
        color: #999;

      .time{
        display: inline-block;
        padding: 10px 0;
      }
      }
    }
    .el-divider--horizontal{
      margin: 24px auto;
    }
    .el-card__header{
      padding: 10px 20px;
    }
    .el-card__body{
      padding: 0 20px;
    }
    .el-button{
      margin-left: 10px;
    }
  }
  </style>

      
